<template>
  <div>
    <Card>
      <p slot="title" class="card-title">
        <Icon type="home"></Icon>
        <span>历史线索(下载5-30天前的线索)</span>
      </p>
      <div>
        <template>
          <Form ref="search" :model="search" :label-width="80">
            <Row>
              <Col span="5">
                <FormItem label="导入时间:" prop="GTE_backupsDate">
                  <DatePicker
                    format="yyyy-MM-dd"
                    type="date"
                    placeholder="开始时间"
                    :editable="false"
                    v-model="search.GTE_backupsDate"
                    @on-change="search.GTE_backupsDate=$event+' 00:00:00'"
                    :options="endDateoptions"
                    style="width:200px"
                  ></DatePicker>
                </FormItem>
              </Col>
              <Col span="4">
                <FormItem :label-width="0" prop="LTE_backupsDate">
                  <DatePicker
                    format="yyyy-MM-dd"
                    type="date"
                    placeholder="结束时间"
                    v-model="search.LTE_backupsDate"
                    @on-change="search.LTE_backupsDate=$event+' 23:59:59'"
                    :editable="false"
                    style="width:200px"
                    :options="endDateoptions"
                  ></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <FormItem>
                <Button type="primary" @click="historyData=initTableData();getHistoryList()">查詢</Button>
                <Button style="margin-left: 8px" @click="reset('search');">重置</Button>
                <!-- <Button style="margin-left: 8px" @click="download()">
                  <Icon type="ios-cloud-download-outline"/>下载线索
                </Button> -->
              </FormItem>
            </Row>
          </Form>
        </template>
      </div>
      <div>
        <Table
          stripe
          ref="modalTable"
          :columns="columns1()"
          :data="historyData.data"
          :highlight-row="true"
        >
          <template slot-scope="{ row }" slot="opt">
            <Tooltip content="下载" placement="top">
              <Button size="large" icon="ios-download-outline" type="primary" shape="circle"  @click="downloadFile(row)"></Button>
            </Tooltip>
            <Tooltip content="删除" placement="top">
              <Button size="large" icon="ios-trash-outline" shape="circle" @click="deleteFile(row)"></Button>
            </Tooltip>
          </template>
        </Table>
        <Page
          :total="historyData.total"
          size="small"
          show-total
          show-elevator
          class="tr"
          @on-change="pageChange"
          :current.sync="historyData.current"
          :page-size="historyData.size"
        ></Page>
      </div>
    </Card>
  </div>
</template>
<script>
import { baseUrl } from "@/libs/axios-cfg";
import { checkRole, allRoles } from "@/libs/util";

export default {
  data() {
    return {
      search: {},
      currentChoose: "",
      loading: false,
      columns1: () => {
        var objs = [
          { title: "导入日期", key: "backupsDate" },
          { title: "文件名字", key: "fileName" },
          { title: "序号", key: "sequence" },
          { title: "条数", key: "count" },
          { title: "操作", slot: "opt" }
        ];
        return objs;
      },
      historyData: this.initTableData(),
      endDateoptions: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      },
      access: [],
      adminFlag: false,
      managerFlag: false,
      salesFlag: false
    };
  },

  methods: {
    initTableData() {
      return {
        data: [],
        current: 1,
        size: 10
      };
    },
    pageChange() {
      this.getHistoryList();
    },
    getHistoryList() {
      var url = "/clueHistory/list/{pageNo}";
      var ps = {};
      ps = Object.assign(ps, this.search);

      this.post(url, ps, { pageNo: this.historyData.current }).then(res => {
        if (this.checkIsSsuccess(res)) {
          this.historyData.data = res.data.content;
          this.historyData.total = res.data.totalElements;
          this.historyData.totalPages = res.data.totalPages;
        } else {
          this.$Message.error({
            content: res["msg"],
            duration: 0,
            closable: true
          });
        }
      });
    },
    getQueryConfig() {},
    reset(name) {
      this.$refs[name].resetFields();
    },
    downloadFile(row) {
      var url = baseUrl +"/call/user_data/"+ row.path + row.fileName;
      window.open(url, "_blank");
    },
    download() {
      var ps = "";
      for (var key in this.search) {
        ps +=
          "&" + key + "=" + (this.search[key] == null ? "" : this.search[key]);
      }
      var url = baseUrl + "/clue/download?downLoadId=" + sessionStorage.token;
      url += ps;
      window.open(url, "_blank");
    },
    deleteFile(row) {
      this.$Modal.confirm({
        title: "提示",
        content: "确定删除线索文件(删除后无法恢复)?",
        onOk: () => {
          var url = "/clueHistory/delete/{id}";
          var ps = {};

          this.post(url, ps, { id: row.id }).then(res => {
            this.$Modal.remove();
            if (this.checkIsSsuccess(res)) {
              this.$Message.success({
                content: "删除文件成功",
                duration: 0,
                closable: true,
                onClose: () => this.getHistoryList()
              });
            } else {
              this.$Message.error({
                content: res["msg"],
                duration: 0,
                closable: true,
                onClose: () => this.getHistoryList()
              });
            }
          });
        },
        onCancel: () => {}
      });
    }
  },
  created() {
    // this.salesFlag = checkRole(allRoles.sales);
    // this.managerFlag = checkRole(allRoles.manager);
    // this.adminFlag = checkRole(allRoles.admin);
    this.getHistoryList();
  },
  components: {
    // CallHistory
  }
};
</script>

